<template>
  <div>
    <carrousel></carrousel>
    <home-nav></home-nav>
    <z-list-card icon="menu1" title="新闻资讯" :categories="newsCats">
      <template #items="{ category }">
        <router-link
          :to="`/articles/${t._id}`"
          class="d-flex mb-3"
          v-for="(t, i) of category.newsList"
          :key="i"
          v-slot="{navigate}"
        >
          <div @click="navigate"  @keypress.enter="navigate">
            <span class="mr-2 text-grey1">[{{ t.categoryName }}]</span>
            <span class="mr-2"> | </span>
            <span class="flex-1 text-hidden mr-2">{{ t.title }}</span>
            <span class="text-grey1">{{ t.createdAt | dateFormat }}</span>
          </div>
        </router-link>
      </template>
    </z-list-card>

    <z-list-card icon="card-hero" title="英雄列表" :categories="heroCats">
      <template #items="{ category }">
        <ul class="herolist d-flex flex-wrap">
          <router-link
            v-for="(h, i) of category.heroList"
            :key="i"
            :to="`/heros/${h._id}`"
            v-slot="{navigate}"
          >
            <li
              class="d-flex flex-column ai-center p-2"
              @click="navigate"
            >
              <img :src="h.avatar" :alt="h.name" />
              <h3 class="fs-sm mt-1">{{ h.name }}</h3>
            </li>
          </router-link>
        </ul>
      </template>
    </z-list-card>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import Carrousel from '@/components/carrousel/Carrousel.vue'
import HomeNav from './components/HomeNav.vue'

export default {
  components: {
    Carrousel,
    HomeNav
  },
  filters: {
    // 时间格式处理
    dateFormat (val) {
      return dayjs(val).format('MM-DD')
    }
  },
  data () {
    return {
      newsCats: [],
      heroCats: []
    }
  },
  methods: {
    async fetchNewsCats () {
      const { data } = await this.$http.get('/news/list')
      data && (this.newsCats = data)
    },
    async fetchHeroCats () {
      const { data } = await this.$http.get('/heroes/list')
      data && (this.heroCats = data)
    }
  },
  created () {
    this.fetchNewsCats()
    this.fetchHeroCats()
  }
}
</script>

<style lang="scss">
.herolist {
  margin: -0.5rem;
  li {
    width: 20%;
    img {
      width: 100%;
      height: auto;
    }
  }
}
</style>
